<template>
  <default-layout>
    <header-back text="继续教育个人信息预录入" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{userInfo.aac003}}</span>
            </div>
            <!--<div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{detail.archiveCode || '&#45;&#45;'}}</span>
            </div>-->
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{userInfo.aac002}}</span>
            </div>
          </div>
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">工作单位：</span>
                <xf-input
                  :valid="[{required: true, msg: '请填写工作单位'}]"
                  v-model="form.company"
                  ref="company"
                  slot="right"
                  placeholder="请填写工作单位"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">现有职称：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择现有职称'}]"
                  :list="eduLevel"
                  v-model="form.technical"
                  ref="technical"
                  slot="right"
                  placeholder="请选择现有职称"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">职称取得年限：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择职称取得年限'}]"
                  :list="years"
                  v-model="form.technicalYear"
                  ref="technicalYear"
                  slot="right"
                  placeholder="请选择职称取得年限"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">最高学历：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择最高学历'}]"
                  :list="eduDegree"
                  v-model="form.aac011"
                  ref="aac011"
                  slot="right"
                  placeholder="请选择最高学历"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">最高学历取得年限：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择最高学历取得年限'}]"
                  :list="years"
                  v-model="form.aac011Graduated"
                  ref="aac011Graduated"
                  slot="right"
                  placeholder="请选择最高学历取得年限"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">最高学历专业：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择最高学历专业'}]"
                  :list="profession"
                  v-model="form.professionCode"
                  :text.sync="form.aac011Profession"
                  ref="professionCode"
                  slot="right"
                  placeholder="请选择最高学历专业"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">第一学历：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择第一学历'}]"
                  :list="eduDegree"
                  v-model="form.firstDegree"
                  ref="firstDegree"
                  slot="right"
                  placeholder="请选择第一学历"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">第一学历取得年限：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择第一学历取得年限'}]"
                  :list="years"
                  v-model="form.firstDegreeGraduated"
                  ref="firstDegreeGraduated"
                  slot="right"
                  placeholder="请选择第一学历取得年限"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">第一学历专业：</span>
                <xf-picker
                  :valid="[{required: true, msg: '请选择第一学历专业'}]"
                  :list="profession"
                  v-model="form.firstDegreeProfessionCode"
                  ref="firstDegreeProfessionCode"
                  :text.sync="form.firstDegreeProfession"
                  slot="right"
                  placeholder="请选择第一学历专业"></xf-picker>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">联系方式：</span>
                <xf-input
                  :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '手机号格式不正确'}]"
                  v-model="form.aae005"
                  ref="aae005"
                  slot="right"
                  placeholder="请填写手机号"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">是否学习过继续教育：</span>
                <xf-radio
                  required="是否学习过继续教育"
                  :list="[{name: '是', value: '1'}, {name: '否', value: '0'}]"
                  v-model="form.educationTraining"
                  ref="educationTraining"
                  slot="right"></xf-radio>
              </yd-cell-item>
            </yd-cell-group>
          </div>
          <div class="edu-list" v-if="String(form.educationTraining) === '1'">
            <div class="title">
              <span class="title-l">继续教育记录</span>
              <span @click="addEdu" v-if="!showForm">+ 添加</span>
            </div>
            <transition name="fade" mode="out-in">
              <div v-if="!showForm" key="list">
                <div class="item" v-for="(val, key) in records" :key="key">
                  <div class="form-list" @click="editEdu(key)">
                    <div class="form-list-item">
                      <div class="label">报名年度：</div>
                      <div class="content">
                        <span>{{val.learnYear}}</span>
                        <span @click.stop.prevent="delEdu(key)"><i class="xffont xf-shanchu"></i>删除</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <edu-record v-else @cancel="cancelEdu" @submit="saveEdu" :idx="editKey" :detail="editForm" key="form" />
            </transition>
          </div>
          <!--<div class="agree">
            <yd-checkbox color="#2e71c9" v-model="agree">
              <span>阅读并同意</span>
            </yd-checkbox>
            <router-link to="/education/agreement">《用户协议》</router-link>
          </div>-->
          <div style="height: .2rem;"></div>
          <div class="next">
            <mt-button size="large" type="primary" @click="onSubmit" :disabled="!agree">提交</mt-button>
          </div>
          <transition name="router" mode="out-in">
            <router-view class="fixed-router"></router-view>
          </transition>
        </div>
        <education-success v-if="status === 'success'" key="success"></education-success>
      </transition>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import XfRadio from '../../../components/xf-radio/xf-radio.vue'
  import EducationSuccess from './success.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters} from 'vuex'
  import {dics, getDics} from '../../../common/js/dictionaries'
  import {validate, personalRecord, arrToForm} from '../../../common/js/util'
  import EduRecord from './edu-record'

  export default {
    components: {
      EduRecord,
      DefaultLayout,
      EducationSuccess,
      XfRadio,
      XfPicker,
      XfInput,
      HeaderBack},
    computed: {
      ...mapGetters([
        'userInfo'
      ]),
      years: {
        get() {
          const year = new Date().getFullYear()
          const arr = []
          for (let i = 0; i < 50; i++) {
            arr.push({name: year - i, value: year - i})
          }
          return arr
        }
      }
    },
    data() {
      return {
        form: {
          company: '', // 工作单位
          technical: '', // 现有职称
          technicalYear: '', // 职称取得年限
          aac011: '', // 最高学历
          aac011Profession: '', // 最高学历专业
          professionCode: '',
          aac011Graduated: '', // 最高学历取得年限
          firstDegree: '', // 第一学历
          firstDegreeGraduated: '', // 第一学历毕业时间
          firstDegreeProfession: '', // 第一学历专业
          firstDegreeProfessionCode: '',
          aae005: '', // 手机号
          educationTraining: '0' // 是否学习过继续教育（0否1是）
        },
        agree: true,
        status: 'form',
        detail: {},
        eduLevel: [],
        eduDegree: [],
        profession: [],
        records: [],
        showForm: false,
        editForm: null,
        editKey: ''
      }
    },
    methods: {
      onSubmit() {
        validate.call(this, this.form).then(() => {
          const form = Object.assign(
            {aac002: this.userInfo.idCard, name: this.userInfo.aac003},
            this.form,
            String(this.form.educationTraining) === '1' ? arrToForm(this.records, 'educationList') : {}
          )
          this.$post('/admin/person/sapi/education/continuing/save/baseInfo', form, loading => { this.$message.loading(loading) }).then(res => {
            if (res.result === 1) {
              this.status = 'success'
            } else {
              this.$message.alert(res.message)
            }
          })
        })
      },
      // 档案信息查询
      getInfo() {
        personalRecord().then(res => {
          this.detail = res.archivesSearchForm
        })
      },
      getDics() {
        getDics(dics.eduLevel, dics.eduDegree, dics.profession).then(res => {
          this.eduLevel = res[0]
          this.eduDegree = res[1]
          this.profession = res[2]
        })
      },
      // 获取继续教育信息
      getEduInfo() {
        this.$post('/admin/person/sapi/education/continuing/get/baseInfo', {
          cardId: this.userInfo.idCard
        }, null, false).then(res => {
          console.log(res)
        })
      },
      addEdu() {
        this.showForm = true
        this.editForm = null
        this.editKey = null
      },
      delEdu(key) {
        this.records.splice(key, 1)
      },
      cancelEdu() {
        this.showForm = false
      },
      saveEdu(detail) {
        if (this.editKey !== null) {
          this.records.splice(this.editKey, 1, detail)
        } else {
          this.records.push(detail)
        }
        this.showForm = false
      },
      editEdu(key) {
        this.showForm = true
        this.editKey = key
        this.editForm = this.records[key]
      }
    },
    created() {
      // this.getInfo()
      this.getDics()
      this.getEduInfo()
      this.form.aae005 = this.userInfo.aae005
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .form{
    margin: .15rem 0 0 0;
  }
  .next{
    padding: .15rem 0 0 0;
  }
  .agree{
    padding: .2rem;
    background: #fff;
    border-top: 1px solid #ededed;
    display: flex;
    align-items: center;
    a{
      color: $primary;
    }
  }
  .edu-list{
    background: #f5f5f5;
    .title{
      padding: .2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-l{
        border-left: 4px solid $primary;
        display: inline-block;
        padding: 0 0 0 .2rem;
      }
    }
    .tit{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .2rem .2rem;
      border-bottom: 1px solid #ededed;
    }
    .item{
      padding: 0 .2rem;
      background: #fff;
    }
  }
  .form-list{
    border-top: 1px solid #ededed;
    .form-list-item{
      align-items: center;
      .content{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
</style>
